<template>
    <div class="secretaryAside">
        <el-aside style="width: auto; border: none; height: 100vh;scrollbar-width: none;">
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                background-color="#1a1d27" text-color="#fff" active-text-color="#ffd04b" style="text-align: left;">

                <h3>社团管理系统</h3>

                <!-- 没有二级菜单 -->
                <el-menu-item v-for="item in noChildren" :key="item.name" :index="item.name" @click="clickMenu(item)">
                    <i :class="`el-icon-${item.icon}`"></i>
                    <span slot="title">
                        {{ item.label }}
                    </span>
                </el-menu-item>


                <!-- 有二级菜单 -->
                <el-submenu v-for="item in hasChildern" :key="item.name" :index="item.name">
                    <template slot="title">
                        <i :class="`el-icon-${item.icon}`"></i>
                        <span slot="title">{{ item.label }}</span>
                    </template>
                    <el-menu-item-group v-for="it in item.children" :key="it.name">
                        <el-menu-item :index="it.name" @click="clickMenu(it)">{{
                            it.label
                        }}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>
    </div>
</template>

<script>
export default {
    name: "SecretaryAside",
    data() {
        return {
            // 菜单数据
            menuData: [
                {
                    path: "/sepersonal",
                    name: "SEPersonal",
                    label: "个人中心",
                    icon: "user-solid",
                },
                {
                    path: "/seuser",
                    name: "SEUser",
                    label: "社员管理",
                    icon: "s-custom",

                },
                {
                    path: "/seclubs",
                    name: "SEClubs",
                    label: "社团管理",
                    icon: "s-ticket",
                },
                {
                    path: "/seactivities",
                    name: "SEActivities",
                    label: "活动管理",
                    icon: "s-management",
                },
                {
                    path: "/senotices",
                    name: "SENotices",
                    label: "新闻公告管理",
                    icon: "setting",
                },

                // {
                //     label: "系统管理",
                //     icon: "setting",
                //     name: "settingManager",
                //     children: [
                //         {
                //             path: "/bannerManage",
                //             name: "BannerManage",
                //             label: "轮播图管理",
                //             icon: "setting",
                //         }
                //     ],
                // },



            ]
        }

    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        clickMenu(item) {
            // 如果更新的路由和当前路由不一致就更新路由
            if (this.$route.path != item.path && !(this.$route.path === "/AdminHome" && item.path === "/")) {
                this.$router.push(item.path)
            }
        },
    },
    computed: {

        //有孩子表示二级菜单
        hasChildern() {
            return this.menuData.filter((item) => item.children);
        },
        //没有孩子，表示一级菜单
        noChildren() {
            return this.menuData.filter((item) => !item.children);
        },

    },
};
</script>


<style scoped>
/* 去掉滚动条，同时用<el-aside></el-aside>标签包裹 */
.el-aside::-webkit-scrollbar {
    display: none;
}

.el-menu h3 {
    padding-top: 10px;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 56px;
}

.el-menu-vertical-demo {
    height: 150vh;
    border: 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-submenu__title {
    font-size: 16px;
}
</style>